<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>元素节点的创建</title>
    <script type="text/javascript">
        function method01(){
            //通过js创建一个div元素节点
            var div07=document.createElement('div');
            div07.innerHTML='我是div07';
            //把创建的div标签放到HTML文件里
            var divFather=document.getElementById('father');
            //把元素节点放到所有儿子最后面
            divFather.appendChild(div07);
        }
        function method02(){
            //通过js创建一个div元素节点
            var divElement=document.createElement('div');
            divElement.innerHTML='我是div03_04';
            //把元素节点放到html
            var divFther=document.getElementById('father');
            var divElement04=document.getElementById('div04');
            //把divElement元素节点放到divElement04之前
            divFther.insertBefore(divElement,divElement04);

        }
    </script>
</head>
<body>
<div id="father">
    <div>我是div01</div>
    <div>我是div02</div>
    <div>我是div03</div>
    <div id="div04">我是div04</div>
    <div>我是div05</div>
    <div>我是div06</div>
</div>
<button onclick="method01()">创建元素节点</button><br>
<button onclick="method02()">创建元素节点</button><br>
</body>
</html>